<template>
  <div id="baidu-map">
    <baidu-map
      class="bm-view" :center="map.center" :zoom="map.zoom"
      @ready="ready" :map-click="false" @load="loadMap"
      @zoomend="syncCenterAndZoom">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!--点-->
      <bm-marker
        v-for="(item,index) in map.markList" :key="index"
        :position="item.position"
        animation="BMAP_ANIMATION_DROP"
        @click="markClick(index)" :dragging="true"
        :icon="item.icon" @dragend="markChange">
      </bm-marker>
      <!--提示信息-->
      <bm-info-window
        :width="350" :height="220"
        :show="windowData.isShow"
        :position="windowData.position"
        :title="windowData.title"
        @open="infoWindowOpen"
        @close="infoWindowClose">
        <div @click="windowClick(windowData)">
          <el-row :gutter="23">
            <el-col :span="10" style="text-align: center; margin-top: 30px">
              <el-image :src="windowData.picUrl"
                        style="width: 120px; height: 120px;">
              </el-image>
            </el-col>
            <el-col :span="13" style="text-align:left; margin-top: 10px;">
              <div :class="alarmClassName(windowData.powerSwitch)">
                总闸：<span :class="spanClass(windowData.powerSwitch)">{{ windowData.powerSwitch }}</span>
              </div>
              <div :class="alarmClassName(windowData.power)">
                市电：<span :class="spanClass(windowData.power)">{{ windowData.power }}</span>
              </div>
              <div :class="alarmClassName(windowData.net)">
                主网络：<span :class="spanClass(windowData.net)">{{ windowData.net }}</span>
              </div>
              <div :class="alarmClassName(windowData.deviceState)">
                设备状态：<span :class="spanClass(windowData.deviceState)">{{ windowData.deviceState }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
const level_99_url = '';
const defaupicUrl = '';
export default {
  data() {
    return {
      map: {
        isShow: false,
        center: {
          lng: 117.43597971683234,
          lat: 40.044265204739666
        },
        zoom: 15,
        markList: [
          {
            index: 1,
            position: {
              lng: 117.43597971683234,
              lat: 40.044265204739666
            },
            faultLevel: 1,
            id: 1,
            name: '点位1',
            icon: {
              url: level_99_url,
              size: {
                width: 25,
                height: 25
              }
            },
            ip: '',
            picUrl: defaupicUrl,
            powerSwitch: '',
            power: '',
            net: '',
            deviceState: '',
          },
          {
            index: 1,
            position: {
              lng: 116.2917,
              lat: 39.8427
            },
            faultLevel: 99,
            id: 1,
            name: '点位1',
            icon: {
              url: level_99_url,
              size: {
                width: 25,
                height: 25
              }
            },
            ip: '',
            picUrl: defaupicUrl,
            powerSwitch: '',
            power: '',
            net: '',
            deviceState: '',
          }
          ],
        clickMarkIndex: '',
      },
      windowData: {
        isShow: false,
        title: '',
        id: '',
        position: {},
        powerSwitch: '1',  //总闸
        power: '2',  //市电
        net: '3',  //主网络
        deviceState: '4',  //设备状态
        picUrl: '',
        faultLevel: 1,
      }
    }
  },
  methods: {
    //地图滚动
    syncCenterAndZoom(e) {
      this.map.zoom = e.target.getZoom();
    },
    //初始化地图
    ready({BMap, map}) {
      console.log(BMap, map);
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
      // 点击事件获取经纬度
      map.addEventListener('click', function (e) {
        console.log(e.point.lng, e.point.lat)
      });
      // 自定义样式
      map.setMapStyle({
        styleJson: [
          {
            "featureType": "road",
            "elementType": "all",
            "stylers": {
              "lightness": 20
            }
          },
          {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
              "color": "#f49935"
            }
          },
          {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
              "visibility": "off"
            }
          },
          {
            "featureType": "local",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          },
          {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
              "color": "#d1e5ff"
            }
          },
          {
            "featureType": "poi",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }
        ]
      });
    },
    //标记点击事件
    markClick(index) {
      this.map.clickMarkIndex = index;
      this.infoWindowOpen();
    },
    //信息窗体打开
    infoWindowOpen() {
      this.windowData.isShow = true;
      var index = this.map.clickMarkIndex;
      this.windowData.id = this.map.markList[index].id;
      this.windowData.title = this.map.markList[index].name;
      this.windowData.position = this.map.markList[index].position;
      this.windowData.picUrl = this.map.markList[index].picUrl;
      this.windowData.faultLevel = this.map.markList[index].faultLevel;
      this.$nextTick(() => {
        if (this.windowData.faultLevel === 1) {
          //document.documentElement.style.setProperty('--box_background', 'rgba(8, 120, 18, 0.6)');
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'transparent';
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'rgba(253, 4, 95, 0.6)'
        } else if (this.windowData.faultLevel === 2) {
          //document.documentElement.style.setProperty('--box_background', 'rgba(255, 156, 1, 0.6)');
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'transparent';
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'rgba(255, 156, 1, 0.6)'
        } else if (this.windowData.faultLevel === 3) {
          //document.documentElement.style.setProperty('--box_background', 'rgba(226, 223, 30, 0.6)');
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'transparent';
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'rgba(226, 223, 30, 0.6)'
        } else if (this.windowData.faultLevel === 4) {
          //document.documentElement.style.setProperty('--box_background', 'rgba(8, 120, 18, 0.6)');
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'transparent';
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'rgba(0, 234, 220, 0.6)'
        } else {
          //document.documentElement.style.setProperty('--box_background', 'rgba(8, 120, 18, 0.6)');
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'transparent';
          document.getElementsByClassName('BMap_pop')[0].childNodes[8].style.backgroundColor = 'rgba(8, 120, 18, 0.6)'
        }
      })
    },
    //信息窗体关闭
    infoWindowClose() {
      this.windowData.isShow = false;
      this.windowData.faultLevel = ''
    },
    //信息窗体点击事件
    windowClick(id) {
      console.log(id)
    },
    //信息窗体打开
    bfClassName(faultLevel) {
      if (faultLevel === 1) {
        return 'bg_level_1'
      } else if (faultLevel === 2) {
        return 'bg_level_2'
      } else if (faultLevel === 3) {
        return 'bg_level_3'
      } else if (faultLevel === 4) {
        return 'bg_level_4'
      } else {
        return 'bg_level_99'
      }
    },
    //设置报警图标样式
    alarmClassName(data) {
      if (data === '正常' || data === '-/-' || data[0] === '0') {
        return 'alarm_normal';
      } else {
        return 'alarm_abnormal';
      }
    },
    //设置状态信息颜色
    spanClass(data) {
      if (data === '正常' || data[0] === '0') {
        return 'span_normal';
      } else if (data === '-/-') {
        return 'span_no_device';
      } else {
        return 'span_abnormal';
      }
    },
    //标记点移动事件
    markChange(params) {
      this.map.center.lat = params.point.lat;
      this.map.center.lng = params.point.lng;
    },
    getMarkList() {

    },
    //加载数据（如果数据是异步加载）
    loadMap() {
      this.getMarkList();
    },
  },
  mounted() {
  }
}
</script>

<style>
#baidu-map {
  height: 100vh;
}

.bm-view {
  width: 100%;
  height: 100%;
}

/* 去除百度地图版权那行字 和 百度logo */
.bm-view .BMap_cpyCtrl {
  display: none !important;
}

.bm-view .anchorBL {
  display: none !important;
}

/*左上角*/
.BMap_pop div:nth-child(1) div {
  background-color: transparent !important;
  border-left: 0px !important;
  border-top: 0px !important;
}

/*右上角*/
.BMap_pop div:nth-child(3) div {
  display: none;
}

/*左下角*/
.BMap_pop div:nth-child(5) {
  display: none;
}

/*右下角*/
.BMap_pop div:nth-child(7) {
  display: none;
}

/*箭头部分*/
.BMap_pop div:nth-child(8) {
  display: none;
}

/*主体内容部分*/
.BMap_pop div:nth-child(9) {
  left: 0px !important;
  top: 0px !important;
  font-size: 15px;
  color: #fff;
  line-height: 39px;
  width: 100% !important;
  height: 110% !important;
  background-color: var(--box_background);
}

/*顶中间*/
.BMap_pop .BMap_top {
  display: none;
}

/*底中间*/
.BMap_pop .BMap_bottom {
  display: none;
}

.BMap_pop .BMap_center {
  position: initial !important;
  border-left: 0px solid #ababab !important;
  border-right: 0px solid #ababab !important;
  background-color: transparent !important;
}

.BMap_bubble_title {
  color: #FFF;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  margin: 7px;
}

.alarm_normal {
  color: #fff;
  line-height: 39px;
  font-size: 14px;
}

.alarm_normal:before {
  content: "";
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 13px;
  margin-top: 8px;
  background-position: center center;
  background-image: url("../assets/logo.png");
}

.alarm_abnormal {
  color: #fff;
  line-height: 39px;
  font-size: 14px;
}

.alarm_abnormal:before {
  content: "";
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 13px;
  margin-top: 9px;
  background-position: center center;
  background-image: url("../assets/logo.png");
}

.span_normal {
  color: #6ef22d;
}

.span_abnormal {
  color: #fd0433;
}

.span_no_device {
  color: rgb(74, 74, 74);
  font-weight: bolder;
}

.bg_level_1 {
  background: rgba(253, 4, 95, 0.7)
}

.bg_level_2 {
  background: rgba(255, 156, 1, 0.7)
}

.bg_level_3 {
  background: rgba(226, 223, 30, 0.7)
}

.bg_level_4 {
  background: rgba(0, 234, 220, 0.7)
}

.bg_level_99 {
  background: rgba(8, 120, 18, 0.7)
}
</style>
